<template>
    <div id="mapDiv" style="height: 100vh;"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import * as olProj from 'ol/proj';
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
export default {
    mounted() {
        const map = new Map({
            target: "mapDiv",
            layers: [
                new TileLayer({
                    // source: new OSM(),
                    source: new XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=	2b98200e63f5121ef893dd8f6627ca17",
                        wrapX: false
                    })
                }),
                new TileLayer({
                    // source: new OSM(),
                    source: new XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2b98200e63f5121ef893dd8f6627ca17",
                        wrapX: false
                    })
                })
            ],
            //地图视图设置
            view: new View({
                //地图初始中心点
                center: olProj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
                //地图初始显示级别
                zoom: 5
            })
        });
    }
};
</script>

<style scoped>
#mapDiv {
    width: 100%;
    height: 100%;
}
</style>